<template>
    <div class="fill_all">
        <div class="half">
            <div class="title">科技创新</div>
            <el-tabs v-model="activeK" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="育种分类统计" name="yuRef">
                    <div class="e_chart" ref="yuRef"></div>
                </el-tab-pane>
                <el-tab-pane label="论文统计" name="lunRef">
                    <div class="e_chart" ref="lunRef"></div>
                </el-tab-pane>
                <el-tab-pane label="专利统计" name="zhuanRef">
                    <div class="e_chart" ref="zhuanRef"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="half">
            <div class="title">推广服务</div>
            <el-tabs v-model="activeT" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="推广服务人次" name="renRef">
                    <div class="e_chart" ref="renRef"></div>
                </el-tab-pane>
                <el-tab-pane label="推广服务轮播" name="boRef">
                    <div class="e_chart">
                        <ScrollBoard style="height:100%" :config="scrollConfig" v-if="activeT === 'boRef'"></ScrollBoard>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <el-drawer v-model="openDraw" :title="getTitle" direction="rtl" :before-close="handleClose">
        <component :is="componentName"></component>
    </el-drawer>
</template>
<script setup lang='ts'>
import * as $echarts from 'echarts'
import { ref, reactive, nextTick, onMounted, inject, onBeforeUnmount, shallowRef, computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ScrollBoard } from '@kjgl77/datav-vue3'
import { XbsjEarthUi } from "@/scripts/xbsjEarthUi";
import { ESImageLabel } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { SceneTree, SceneTreeItem } from "xbsj-xe2/dist-node/xe2";
import { treeToFlat } from '@/libs/index'
import ViDraw from './viDraw.vue'
import QiDraw from './qiDraw.vue'

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const sceneTree = inject('sceneTree') as SceneTree
const activeK = ref('yuRef')
const activeT = ref('renRef')
const openDraw = ref<boolean>(false)
const componentName = shallowRef(ViDraw)
const yuRef = ref<HTMLInputElement | null>(null)
const lunRef = ref<HTMLInputElement | null>(null)
const zhuanRef = ref<HTMLInputElement | null>(null)
const renRef = ref<HTMLInputElement | null>(null)
let sceneObject: ESImageLabel | null = null
let listerFuc: (() => void) | null = null
const yuRefOption = {
    title: {
        text: '育种分类统计数',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            color: '#fff',
        }
    },
    series: [
        {
            name: '农作物',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1848, name: '大麦' },
                { value: 735, name: '猴头菇' },
                { value: 580, name: '黄瓜' },
                { value: 484, name: '芥菜' },
                { value: 300, name: '水稻' },
                { value: 100, name: '水稻不育系' },
                { value: 150, name: '甜瓜' },
                { value: 80, name: '小麦' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
const lunRefOption = {
    title: {
        text: '论文统计',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name: '论文统计',
            data: [82, 32, 91, 34, 129, 133, 80],
            type: 'line',
            areaStyle: {}
        }
    ]
};
const zhuanRefOption = {
    title: {
        text: '专利统计',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        top: 'bottom',
        textStyle: {
            color: '#fff',
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '30px',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [{
        name: '专利统计',
        type: 'bar',
        stack: 'Ad',
        data: [8, 18, 6, 11, 14, 19, 21],
        itemStyle: {
            color: '#2384e1'
        }
    },
    {
        name: '许可数量',
        type: 'bar',
        stack: 'Ad',
        data: [5, 10, 3, 5, 6, 8, 9],
        itemStyle: {
            color: '#e15f23'
        }
    }]
}
const renRefOption = {
    title: {
        text: '推广服务人次',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name: '推广服务人次',
            data: [820, 320, 901, 304, 1029, 1033, 800],
            type: 'line'
        }
    ]
};
// 声明 echartIns 的类型
interface EchartInsType {
    [property: string]: $echarts.ECharts; // 使用 ECharts 的 ECharts 类型
}
const eCharIns = reactive<EchartInsType>({})
const scrollConfig = reactive({
    header: ['科技服务'],
    headerBGC: '#1e596f82',
    oddRowBGC: '#003b51b3',
    evenRowBGC: '#0a2732b3',
    align: 'left',
    columnWidth: [50, 450],
    data: [
        [' 2020年度院领导班子和个人考核顺利完成'],
        ['经作所赴桐乡开展“三服务”活动'],
        ['我院赴中国水稻研究所考察调研'],
        ['浙粮集团和浙江善农现代农业科技发展有限公司来院交流'],
        ['农科院开展新春“三服务”工作'],
        ['科技人员赴桐乡开展三服务活动'],
        ['院领导赴梅花洲开展“三服务”活动'],
        ['生态所下乡开展“三服务”活动'],
        ['院经济作物所科技人员赴桐乡查看油菜生长情况'],
        [' 院领导赴秀洲区油车港镇开展“三服务”活动'],
        [' 院班子赴桐乡市大麻镇开展“三服务”工作'],
        [' 我院选育的嘉优中科3号制种产量突破200公斤']
    ],
    index: true
})
function handleClick(tab: TabsPaneContext) {
    // console.log(tab, 'tab', tab.paneName)
    nextTick(() => {
        setTimeout(() => {
            chartYu(tab.paneName)
        }, 500);
    })
}
function chartYu(refType: string) {
    const refMap = {
        yuRef,
        lunRef,
        zhuanRef,
        renRef
    }
    const optionMap = {
        yuRef: yuRefOption,
        lunRef: lunRefOption,
        zhuanRef: zhuanRefOption,
        renRef: renRefOption,
    }
    if (!refType) return
    if (refType === 'boRef') {
        // 
    } else {
        const refDOm = $echarts.getInstanceByDom(refMap[refType].value)
        if (!refDOm) {
            eCharIns[refType] = $echarts.init(refMap[refType].value, null, { renderer: 'svg' })
        }
        eCharIns[refType].clear()
        eCharIns[refType].setOption(optionMap[refType])
    }
}
function listenSceneEvent() {
    // sceneTree
    const sheSceneObject = xbsjEarthUi.getSceneObjectById('30ad2bf5-1796-496a-9c8e-6cce9d5188f4') as ESImageLabel
    const qiSeceneObject = xbsjEarthUi.getSceneObjectById('98730a86-aa65-49b7-89e2-aef0aa308628') as ESImageLabel
    if (sheSceneObject) {
        sheSceneObject.widgetEvent.don(e => {
            // console.log("widgetEvent信息", e, "拾取的可视化对象", sheSceneObject)
            if (e.type === 'leftClick') {
                // console.log('123');
                openDraw.value = true
                componentName.value = ViDraw
            }
        })
    }
    if (qiSeceneObject) {
        qiSeceneObject.widgetEvent.don(e => {
            // console.log("qiSeceneObject信息", e, "拾取的可视化对象", qiSeceneObject)
            if (e.type === 'leftClick') {
                // console.log('444');
                openDraw.value = true
                componentName.value = QiDraw
            }
        })
    }
}


function handleClose(done: () => void) {
    openDraw.value = false
    done()
}
onMounted(() => {
    nextTick(() => {
        nextTick(() => {
            listenSceneEvent()
            chartYu(activeK.value)
            chartYu(activeT.value)
        })
    })
})

onBeforeUnmount(() => {
    // 销毁事件
    listerFuc && listerFuc()
})

const getTitle = computed(() => {
    return componentName.value === QiDraw ? '气象' : '监控'
})
</script>
<style scoped>
.fill_all {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.half {
    flex: 1;
}

.title {
    height: 25px;
    background-color: rgba(27, 27, 27, 1);
}

.demo-tabs {
    height: calc(100% - 25px);
}

::v-deep .el-tabs__item {
    color: #fff;
}

::v-deep .el-tabs__content {
    height: calc(100% - 55px);
}

::v-deep .el-tabs__content>div,
.e_chart {
    height: 100%;
}
</style>